<template>
  <!-- 购物车 -->
  <div class="hello">




  <p class="pOOne">购物清单</p>
    <table border="1" collapse="1">
      <thead class="the">
        <tr>
          <th><input type="checkbox">全选</th>
          <th>商品</th>
          <th>数量</th>
          <th>单价(元)</th>
          <th>金额(元)</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in xuanran" :key="index">
          <td><input type="checkbox"></td>
          <td>
            <dl class="dls">
              <dt><img class="imgOne" src="https://tupian.qqw21.com/article/UploadPic/2021-2/202121219531349614.jpg" alt=""></dt>
              <dd>
                <span class="spanOne">产品名称2</span>
  <pre class="preSpan">
        品牌: skc产地:韩国
                   规格/纯度:99.7%起定量:215千克
           配送仓储:上海仓海仓储
                  </pre>
              </dd>
            </dl>
          </td>
          <td>
            <button @click="jian(index)">-</button>
            <input type="number" v-model.number="item.numberss" class="inpNumber" min="1">
            <button @click="jia(index)">+</button>
          </td>
          <td class="tdThree">￥800.00</td>
          <td class="tdThree">￥3200.00</td>
          <td><button @click="btnShanchu(index)">删除</button></td>
        </tr>
        <!-- 示例数据结束 -->
      </tbody>
      
    </table>
    <div class="clear"></div>
    <div class="header">
      <div>
        <p>删除所选商品</p>
        <p>继续购物</p>
      </div>
      <div>
        <p>
          <span>2</span>
          <span>件商品总计(不含运费):</span>
        </p>
        <p>
          <span>￥</span>
          <span>4000</span>
        </p>
        <button class="jeisuan">去结算</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      xuanran: [
        { numberss: 1,},
        { numberss: 1,},
      ],
    };
  },
  methods: {
    // 点击加的时候加一
    jia(index) {
      this.xuanran[index].numberss++;
    },
    // 点击减的时候加一
    jian(index) {
      // 判断小于一的时候不能再减
      if (this.xuanran[index].numberss > 1) {
        this.xuanran[index].numberss--;
      }
    },
    btnShanchu(index) {
      this.xuanran.splice(index, 1);
    },
  },
}

</script>

<style scoped>
.jeisuan{
  float: left;
  height: 50px;
  border: none;
  color: #fff;
  background: #f76e19;
}
.header div p:nth-child(1){
  float: left;
  margin-right: 20px;
  margin-left: 10px;
}
.header div p:nth-child(2){
 float: left;
  margin-right: 20px;
  
}
.header div:nth-child(2) p span:nth-child(1){
  color: red;
 }
.header div:nth-child(2) p:nth-child(2){
  color: red; 
 }
 
.header div span{
  float: left;
}
.header div:nth-child(1){
  float: left;
  font-size: 13px;
  
}
.header div:nth-child(2){
  font-size: 13px;
  float: right;

}

.clear{
  clear: both;
}
.header{
  width: 720px;
  height: 50px;
  color: #5d5656;

  background: #f3f3f3;
  margin: auto;
}
.pOOne{
  margin-left: -650px;
  font-weight: bold;
  color: #0aaff5;
}
.btndel{
  border: none;
  background: none;
  font-size: 15px;
  color: #635b5b;
}
.tdThree{
  color: red;
  font-size: 14px;
}
.inpNumber{
  width: 25px;
  outline: navajowhite;
}
.buttonCss{
  width: 20px;
  height: 23px;
  line-height: 20px;
  border: none;

}
.buttonCss:nth-child(1){
  border: none;
}
.preSpan{
  line-height: 20px;
}
.spanOne{
  font-weight: bold;
}
.dls dt{
  float: left;
}
.dls dd{
  float: left;
  margin-left: -100px;
  margin-top: 5px;
}

.imgOne{
  widows: 100px;
  height: 100px;
}
.the{
  line-height: 60px;
  background: #f3f3f3;
}
table{
  width: 720px;
  border-collapse: collapse;
  text-align: center;
  border: none;
  margin: auto
}
.hello{
  width:720px;
  margin: auto;
  border-top: 3px solid #0aaff5;

}
</style>
